<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button @click="onRefresh">统计</el-button>
        <el-button style="width: 80px" @click="distributeQuery">库存分布</el-button>
        <el-button style="width: 80px" @click="subInventoryClick">分仓库存</el-button>
        <el-select v-model="presetPriceValue" style="width: 120px">
          <el-option @click.native="presetPriceSelect(item)" v-for="item in presetPriceData" :key="item.value"
            :label="item.label" :value="item.value" :disabled="item.disabled"
            :style="item.disabled ? 'pointer-events: none' : ''"></el-option>
        </el-select>
        <el-button @click="exportExcel()" :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''">导出</el-button>
        <el-button :disabled="!buttonsPermissions.DaYin" :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint">打印(P)</el-button>
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.keywords" placeholder="请输入商品名称\条码\编码\规格\拼音码"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
        <!-- <el-button @click="onRefresh">刷新</el-button> -->
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_screen">
        <div class="screen_left">
          <div class="set_input_width">
            <p>仓 库</p>
            <el-select placeholder="请选择" v-model="queryData.storehouseId" class="select_storehouse" @change="onChangeStorehouse" ref="cangku"
              filterable
              @visible-change="(value) => handleFilterMethod('', 'storehouseName')"
              :filter-method="(value) => handleFilterMethod(value, 'storehouseName')" >
              <el-option v-for="item in pdckOptions" @click.native="handleSelect" :key="item.id"
                :label="item.storehouseName" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="set_input_width">
            <div style="margin-right: 10px; flex-shrink: 0">过滤记录</div>
            <el-select placeholder="请选择" v-model="queryData.showZeroNumberFlag" class="select_zero_number">
              <el-option v-for="item in gljlOptions" :key="item.value" :label="item.label"
                @click.native="handleFilterSelect" :value="item.value"></el-option>
            </el-select>
          </div>
          <el-checkbox v-model="isGroupByGoodsTypeFlag" @change="typeChange">显示商品类别的统计结果</el-checkbox>
          <el-checkbox v-model="isShowDelGoodsFlag" @change="statusChange">不显示停用的商品</el-checkbox>
          <el-checkbox v-model="isShowDelWarehouseFlag" @change="statusChange">不显示停用仓库</el-checkbox>
        </div>
        <div class="screen_right">双击商品可查看库存变动明细</div>
      </div>
      <div class="div_table">
        <div class="div_tree">
          <div class="tree_div1">
            <span>商品类别</span>
          </div>
          <div class="tree_input">
            <p>
              <input type="text" placeholder="查找" v-model="filterText" />
              <span>
                <i class="el-icon-search"></i>
              </span>
            </p>
          </div>
          <div class="tree_structure">
            <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleClick"
              :filter-node-method="filterNode"></el-tree>
          </div>
        </div>
        <div class="table_content">
          <el-table show-summary ref="tableData" border :summary-method="getSummaries" highlight-current-row :header-cell-style="{
            background: '#E3F6FF',
            color: '#666666',
            textAlign: 'center',
            height: '30px',
            borderColor: '#dddddd',
          }" :data="tableData" height="100%" style="width: 100%" @sort-change="changeSort"
            @row-dblclick="handleRowDbclick" @row-click="rowClick" :row-style="rowClass">
            <template v-for="(item, index) in columnData">
              <el-table-column border :label="item.label" v-if="item.show" :key="index">
                <template v-for="(v, i) in item.subset">
                  <el-table-column border :show-overflow-tooltip="true" v-if="v.zidingyiState" :key="i" :prop="v.props"
                    :label="v.zidingyiName ? v.zidingyiName : v.morenName" min-width="120px"
                    :resizable="v.props=='goodsName'?true:false" 
                    :width="v.props == 'xh' ? '50px' : v.props == 'spbh' ? '170px' : v.props == 'difference' ? '170px' :''"
                    :sortable="v.zidingyiSort == 1">
                    <template v-if="v.props === 'baseUnit_dictText'" #header>
                          <el-dropdown trigger="click">
                            <span class="el-dropdown-link" style="font-size: 12px;">
                                {{ selectUnit == '0' ? '基本单位' : '辅助单位' }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                @click.native="changeUnit(0)"
                                :style="selectUnit===0?{color: '#409EFF'}:{}"
                              >基本单位
                              </el-dropdown-item>
                              <el-dropdown-item
                                @click.native="changeUnit(1)"
                                :style="selectUnit===1?{color: '#409EFF'}:{}"
                              >辅助单位</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                    </template>
                    <template v-if="v.props === 'baseUnit_dictText'" slot-scope="scope">
                          <el-dropdown trigger="click">
                            <span class="el-dropdown-link" style="font-size: 12px;">
                                {{ scope.row.zzzUnit }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                @click.native="changeUnit(0)"
                                :style="selectUnit===0?{color: '#409EFF'}:{}"
                              >基本单位
                              </el-dropdown-item>
                              <el-dropdown-item
                                @click.native="changeUnit(1)"
                                :style="selectUnit===1?{color: '#409EFF'}:{}"
                              >辅助单位</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                    </template>
                    <template slot-scope="scope">
                      <span v-if="v.props =='goodsName'" style="width: 100%;white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; text-align: left;">{{ scope.row[v.props] }}</span>
                      <span v-else-if="v.props != 'baseUnit_dictText' || !scope.row.auxiliaryUnit">{{ scope.row[v.props] }}</span>
                      <el-dropdown trigger="click" placement="bottom-start" v-else>
                            <span class="el-dropdown-link" style="font-size: 12px;">
                                {{ scope.row.baseUnit_dictText }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                @click.native="handleChangeUnit(0, scope)"
                              ><div>
                                <div style="height: 20px;display: flex;align-items: center;font-size: 11px">基本单位</div>
                                <div style="height: 20px;display: flex;align-items: center;">{{ scope.row.zzzUnit }}</div>
                              </div>
                              </el-dropdown-item>
                              <el-dropdown-item
                                @click.native="handleChangeUnit(1, scope)"
                              >
                              <div>
                                <div style="height: 20px;display: flex;align-items: center;font-size: 11px;">辅助单位</div>
                                <div style="height: 20px;display: flex;align-items: center;">{{scope.row.auxiliaryUnit}}(={{scope.row.scale + scope.row.zzzUnit}})</div>
                              </div>
                            </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                    </template>
                    
                  </el-table-column>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div class="table_pagination">
        <div class="pagination_div">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryData.pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="queryData.pageSize"
            layout="jumper, prev, pager,next, sizes" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration ref="setColumnRef" :columnDataArr="columnData" orderType="库存查询"
      :defaultColumnDataArr="defaultColumnData" @onSaveColumn="onSaveColumn">
    </CConfiguration>
    <!-- 分仓库存 -->
    <el-dialog title="库存分布情况" :visible.sync="subVisible" width="500px" height="382px" destroy-on-close>
      <div class="sub_inventory">
        <div class="top_text">
          <span>商品名称：{{ subTableObj.goodsName }}</span>
          <span style="margin-left: 30px">规格：{{ subTableObj.specs }}</span>
          <span style="margin-left: 30px">单位：{{ subTableObj.baseUnit_dictText }}</span>
        </div>
        <el-table show-summary ref="subTableData" :summary-method="getSummaries1" highlight-current-row :header-cell-style="{
          background: '#EEEEEE',
          color: '#666666',
          textAlign: 'center',
          height: '30px',
          borderColor: '#E3E3E3',
        }" :data="subTableData" height="218" style="width: 100%" @sort-change="changeSort">
          <el-table-column :resizable="false" label="序号" type="index" width="60px" />
          <el-table-column v-for="(item, index) in subColumnData" :show-overflow-tooltip="true" :key="index"
            :prop="item.props" :label="item.title" min-width="100px"></el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="dialog-footer-button"  type="primary" @click="subVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, formatMoney, formatPrice, formatNumber, delcommafy } from '@/utils/index'
export default {
  name: 'inventoryQuery',
  components: {
    CConfiguration,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('库存查询')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.tableData.doLayout()
    })
  },
  created() {
    const data = this.$route.params.data
    if (data) {
      this.paramsData = data
      this.monthValue = this.paramsData.monthValue
      this.queryData.startDate = this.paramsData.startDate
      this.queryData.finishDate = this.paramsData.finishDate
      this.nowDate = [this.paramsData.startDate, this.paramsData.finishDate]
    }
    this.checkStorehouse()
    this.getTreeData()
    this.listTableData()
  },
  data() {
    return {
      selectUnit: 0,
      filterText: '',
      // 总数量
      total: 0,
      // 盘点仓库
      pdckOptions: [],
      // tree查找
      GoodsTypeName: '',
      // 仓库
      ckOptions: [],
      presetPriceIndex: 0, // 参考价格方式
      presetPriceValue: '参考价格方式', // 参考价格方式
      presetPriceData: [
        { label: '零售价', value: 'retailPrice', priceType: '0' },
        { label: '预设售价一', value: 'presetPriceOne', priceType: '1' },
        { label: '预设售价二', value: 'presetPriceTwo', priceType: '2' },
        { label: '预设进价', value: 'presetBidPrice', priceType: '3' },
      ],
      //   过滤记录
      gljlOptions: [
        {
          value: '',
          label: '全部显示',
        },
        {
          value: '0',
          label: '不显示数量为0的记录',
        },
        {
          value: '1',
          label: '只显示数量为0的记录',
        },
      ],
      // 查询条件数据
      queryData: {
        pageNo: 1,
        pageSize: 20,
        // 搜索
        keywords: '',
        // 过滤显示0的记录
        showZeroNumberFlag: '',
        // 商品类别id
        goodsTypeId: '',
        // 仓库id
        storehouseId: '',
        // 参考价格方式  默认预设售价一
        priceType: '1',
      },
      storehouseName: '',// 选择的仓库名称
      defaultColumnData: [], // 默认列配置
      updateId: '', // 修改列配置时返回的id
      // 不显示停用的商品
      isShowDelGoodsFlag: false,
      // 不显示停用的仓库
      isShowDelWarehouseFlag: false,
      // 显示商品类别的统计结果
      isGroupByGoodsTypeFlag: false,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: [],
      // 列配置数据
      columnData: [
        {
          props: 'spxx',
          label: '商品信息',
          show: true,
          subset: [
            {
              id: '1',
              morenName: '序号',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 0,
              noModify: true,
              props: 'xh',
            },
            {
              id: '2',
              morenName: '商品编码',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 1,
              zidingyiSort: 1,
              noModify: false,
              props: 'goodsNumber',
            },
            {
              id: '3',
              morenName: '商品名称',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 2,
              zidingyiSort: 0,
              noModify: false,
              props: 'goodsName',
            },
            {
              id: '4',
              morenName: '规格',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 3,
              zidingyiSort: 1,
              noModify: false,
              props: 'specs',
            },
            {
              id: '5',
              morenName: '单位',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 4,
              zidingyiSort: 0,
              noModify: false,
              props: 'baseUnit_dictText',
            },
            {
              id: '6',
              morenName: '条形码',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 5,
              zidingyiSort: 0,
              noModify: false,
              props: 'barCode',
            },
            {
              id: '7',
              morenName: '商品类别',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 6,
              zidingyiSort: 0,
              noModify: false,
              props: 'xghGoodsTypeId_dictText',
            },
          ],
        },
        {
          props: 'qckc',
          label: '期初库存',
          show: true,
          subset: [
            {
              id: '1',
              morenName: '数量',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 0,
              zidingyiSort: 0,
              noModify: false,
              props: 'initStockNum',
            },
            {
              id: '2',
              morenName: '金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 1,
              zidingyiSort: 1,
              noModify: false,
              props: 'initStockPrice',
            },
          ],
        },
        {
          props: 'dqckqk',
          label: '当前库存情况',
          show: true,
          subset: [
            {
              id: '1',
              morenName: '数量',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 0,
              zidingyiSort: 1,
              noModify: false,
              props: 'opNumber',
            },
            {
              id: '2',
              morenName: '成本单价',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 1,
              zidingyiSort: 1,
              noModify: false,
              props: 'costPrice',
            },
            {
              id: '3',
              morenName: '库存金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 2,
              zidingyiSort: 1,
              noModify: false,
              props: 'stockPrice',
            },
            // {
            //   id: '4',
            //   morenName: '辅助单位',
            //   zidingyiName: '',
            //   morenState: true,
            //   zidingyiState: true,
            //   morenSort: 3,
            //   zidingyiSort: 1,
            //   noModify: false,
            //   props: 'supUnit',
            // },
            // {
            //   id: '5',
            //   morenName: '辅助单位数量',
            //   zidingyiName: '',
            //   morenState: true,
            //   zidingyiState: true,
            //   morenSort: 4,
            //   zidingyiSort: 1,
            //   noModify: false,
            //   props: 'unitNumber2',
            // },
            // {
            //   id: '6',
            //   morenName: '多单位数量',
            //   zidingyiName: '',
            //   morenState: true,
            //   zidingyiState: true,
            //   morenSort: 5,
            //   zidingyiSort: 1,
            //   noModify: false,
            //   props: 'multiUnitNumber',
            // },
            // {
            //   id: '7',
            //   morenName: '辅助单位数量2',
            //   zidingyiName: '',
            //   morenState: true,
            //   zidingyiState: true,
            //   morenSort: 5,
            //   zidingyiSort: 1,
            //   noModify: false,
            //   props: 'unitNumber2',
            // },
          ],
        },
        {
          props: 'ckjg',
          label: '参考价格',
          show: true,
          subset: [
            {
              id: '1',
              morenName: '预设售价一',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 0,
              zidingyiSort: 1,
              noModify: true,
              props: 'referencePrice',
            },
            {
              id: '2',
              morenName: '估值金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 1,
              zidingyiSort: 1,
              noModify: false,
              props: 'valuation',
            },
            {
              id: '3',
              morenName: '差额(与库存金额)',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              morenSort: 2,
              zidingyiSort: 1,
              noModify: false,
              props: 'difference',
            },
          ],
        },
      ],
      lookupValue: '', //类别查找值
      // tree类别数据
      treeData: [],
      batchData: [], // 存储多选的数据
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      showLiepeizhi: false, //是否显示列配置
      url: {
        api: '库存查询',
        exportXlsUrl: '/xghStorehouseGoods/xghStorehouseGoods/storehouseGoodsExportXls',
      },
      activeModel: {},
      subVisible: false,
      subTableData: [{}],
      subTableObj: {
        baseUnit_dictText: '',
        goodsName: '',
        specs: '',
      },
      subColumnData: [
        {
          title: '仓库',
          props: 'storehouseName',
        },
        {
          title: '库存数量',
          props: 'storehouseNumber',
        },
        {
          title: '成本价',
          props: 'cosrPrice',
        },
        {
          title: '库存金额',
          props: 'storePrice',
        },
      ],
      billName: '库存查询',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  mounted() {
    // 初始化列配置数据
    this.defaultColumnData = JSON.parse(JSON.stringify(this.columnData))
    this.selectTitle()
  },
  methods: {
    handleChangeUnit(type, scope) {
      console.log(scope);
      if (type == 0) {
        scope.row.baseUnit_dictText = scope.row.zzzUnit
        scope.row.opNumber = this.$formatNumber(scope.row.zzzNum)
        scope.row.costPrice = item.zzzPrice == '******' ? item.zzzPrice : this.$formatMoney(scope.row.zzzPrice)
      } else {
        scope.row.baseUnit_dictText =  scope.row.auxiliaryUnit
        scope.row.opNumber = this.$formatNumber(scope.row.zzzNum / scope.row.scale)
        scope.row.costPrice = item.zzzPrice == '******' ? item.zzzPrice : this.$formatMoney(scope.row.zzzPrice * scope.row.scale)
      }
      
    },
    changeUnit(type, data) {
      if(data) { // 给打印用的
        data.forEach(item => {
          if(!item.auxiliaryUnit) return
          if(type === 0) {
            item.baseUnit_dictText = item.zzzUnit
            item.opNumber = this.$formatNumber(item.zzzNum)
            item.costPrice =  item.zzzPrice == '******' ? item.zzzPrice : this.$formatMoney(item.zzzPrice)
          } else if(type === 1) {
            item.baseUnit_dictText = item.auxiliaryUnit
            item.opNumber = this.$formatNumber(item.zzzNum / item.scale)
            item.costPrice =  item.zzzPrice == '******' ? item.zzzPrice : this.$formatMoney(item.zzzPrice * item.scale)
          }
        })
      } else { // 给表格用的
        if(this.selectUnit === type) return
        this.selectUnit = type
        this.tableData.forEach(item => {
          if(!item.auxiliaryUnit) return
          if(type === 0) {
            item.baseUnit_dictText = item.zzzUnit
            item.opNumber = this.$formatNumber(item.zzzNum)
            item.costPrice =  item.zzzPrice == '******' ? item.zzzPrice : this.$formatMoney(item.zzzPrice)
          } else if(type === 1) {
            item.baseUnit_dictText = item.auxiliaryUnit
            item.opNumber = this.$formatNumber(item.zzzNum / item.scale)
            item.costPrice =  item.zzzPrice == '******' ? item.zzzPrice : this.$formatMoney(item.zzzPrice * item.scale)
          }
        })
      }
    },

    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      let params = {
        ...this.queryData,
        showDelGoodsFlag: this.isShowDelGoodsFlag ? '0' : '1', // 0不展示 1展示
        showDelWarehouseFlag: this.isShowDelWarehouseFlag ? '0' : '1', // 0不展示 1展示
        groupByGoodsTypeFlag: this.isGroupByGoodsTypeFlag ? '1' : '0',
        pageNo: 1,
        pageSize: 1000000,
      }
      let printExclusive = []
      const res = await getAction('/xghStorehouseGoods/xghStorehouseGoods/storehouseGoods2', params)
      if (res.code == 200) {
        printExclusive = res.result.records || []
        printExclusive.forEach(item => {
          item.zzzUnit = item.baseUnit_dictText
          item.zzzPrice = item.costPrice
          item.zzzNum = item.opNumber
        })
        this.changeUnit(this.selectUnit, printExclusive)
        printExclusive.forEach((item, index) => {
          item.xh = index + 1
        })

        const pricearr = ['costPrice', 'retailPrice', 'referencePrice', 'presetPriceTwo', 'presetBidPrice']
        const monarr = ['initStockPrice', 'stockPrice', 'valuation','difference']
        const numarr = ['initStockNum', 'opNumber', 'unitNumber2', 'multiUnitNumber', 'initStockNum']
        printExclusive = (res.result.records || []).map((item) => {
          // 遍历 item 对象的键
          Object.keys(item).map((key) => {
            // console.log('key', key)
            if (numarr.includes(key)) {
              item[key] = this.$formatNumber(item[key])
            } else if (monarr.includes(key)) {
              item[key] = this.$formatMoney(item[key])
            } else if (pricearr.includes(key)) {
              item[key] = this.$formatPrice(item[key])
            }
          })
          return item
        })
      }
      // 打印
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          cangku: this.$refs.cangku.selected.label,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, (() => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            }))
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.defaultColumnData, 'props')
        this.updateId = id
        this.columnData = this.defaultColumnData
      } else if (obj.code === 404) {
        this.columnData = this.defaultColumnData
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      console.log(value)
      // 检查当前的 columnData 是否为空，如果为空则使用默认列配置
      if (this.columnData.length === 0) {
        this.columnData = JSON.parse(JSON.stringify(this.defaultColumnData));
      }
      let nIndex = 0
      this.columnData.forEach((lItem, lIndex) => {
        let subList = lItem.subset
        if (lIndex > 0) {
          nIndex += this.columnData[lIndex - 1].subset.length
        }
        let list = []
        let count = 0 //记录隐藏的个数
        subList.forEach((item, index) => {
          let nItem = value[nIndex + index]
          list.push(nItem)
          if (!nItem.zidingyiState) {
            count++
          }
        })
        lItem.subset = list
        lItem.show = !(count == list.length)
        this.columnData.splice(lIndex, 1, lItem)
      })
      this.onSaveColumnRequest()
    },
    // 修改列配置后保存修改后的值
    async onSaveColumnRequest() {
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.showTips(res.message, 0)
      } else {
        this.showTips(res.message, 2)
      }
    },
    //类别筛选
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 切换参考价格方式
    presetPriceSelect(val) {
      this.presetPriceValue = '参考价格方式'
      this.presetPriceIndex = this.presetPriceData.indexOf(val)
      this.columnData.forEach((item) => {
        if (item.props == 'ckjg') {
          item.subset[0].morenName = val.label
          // item.subset[0].props = val.value
          this.queryData.priceType = val.priceType
        }
      })
      this.listTableData()
    },
    /**
     * 表格数据
     */
    async listTableData() {
      let params = {
        ...this.queryData,
        showDelGoodsFlag: this.isShowDelGoodsFlag ? '0' : '1', // 0不展示 1展示
        showDelWarehouseFlag: this.isShowDelWarehouseFlag ? '0' : '1', // 0不展示 1展示
        groupByGoodsTypeFlag: this.isGroupByGoodsTypeFlag ? '1' : '0',
      }
      const res = await getAction('/xghStorehouseGoods/xghStorehouseGoods/storehouseGoods2', params)
      if (res.code == 200) {
        this.activeModel = {}
        this.total = res.result.total
        let data = res.result.records || []
        data.forEach((item, index) => {
          item.zzzUnit = item.baseUnit_dictText
          item.zzzPrice = item.costPrice
          item.zzzNum = item.opNumber
          item.xh = index + 1
          // 数据显示格式转换成系统类型
          for (const key in item) {
            if (item.opNumber == 0 && item.stockPrice != '******') {
              //当前库存为0时，库存金额置为0. 20231019
              item.stockPrice = 0
            }
            if (['initStockPrice', 'costPrice', 'stockPrice'].includes(key) && item[key] == '******') {
              console.log(item[key]);
              
            } else if (['initStockNum', 'opNumber', 'unitNumber2', 'multiUnitNumber', 'initStockNum'].includes(key)) {
              item[key] = this.$formatNumber(item[key])
            } else if (['costPrice', 'retailPrice', 'referencePrice', 'presetPriceTwo', 'presetBidPrice'].includes(key)) {
              item[key] = this.$formatPrice(item[key])
            } else if (['initStockPrice', 'stockPrice', 'valuation','difference'].includes(key)) {
              item[key] = this.$formatMoney(item[key])
            }
          }
        })
        this.tableData = data
      }
    },
    /**
     * 获取仓库列表数据
     */
    checkStorehouse() {
      getAction('/xghStorehouse/xghStorehouse/queryListByPole', {}).then((res) => {
        if (res.code === 200) {
          this.pdckOptions = res.result
          this.pdckOptions.splice(0, 0, {
            storehouseName: '全部',
            id: '',
            "storehousePinyinCode": "QB"
          })
          this.totalStores = this.pdckOptions
        } else {
          this.$elMessage({
            showClose: true,
            message: res.message,
            type: 'error',
            iconClass: 'el-icon-warning-outline',
            duration: 3000,
          })
        }
      })
    },
    // 分仓库存
    subInventoryClick() {
      //重置上次获取到的数据
      this.subTableObj = this.$options.data().subTableObj
      this.subTableData = []
      if (this.total === 0) {
        return this.showTips('数据为空，无法查看分仓库存！')
      }
      //商品类别模式下不请求接口，只显示个空页面
      if (this.isGroupByGoodsTypeFlag) { 
        this.subVisible = true
        return
      }
      if (!this.activeModel.id) {
        this.activeModel = this.tableData[0]
      }
      getAction('/xghStorehouseGoods/xghStorehouseGoods/queryStorehouseGoodsDistributeByGoodsId', {
        goodsId: this.activeModel.id,
      }).then((res) => {
        if (res.code === 200) {
          this.subTableObj.baseUnit_dictText = this.activeModel.baseUnit_dictText
          this.subTableObj.goodsName = this.activeModel.goodsName
          this.subTableObj.specs = this.activeModel.specs
          let data = res.result || []
          data.forEach((item) => {
            item.cosrPrice = item.cosrPrice == '******' ? item.cosrPrice : formatPrice(item.cosrPrice)
            item.storePrice = item.storePrice == '******' ? item.storePrice : formatMoney(item.storePrice)
            item.storehouseNumber = item.storehouseNumber ? formatNumber(item.storehouseNumber) : item.storehouseNumber
          })
          this.subTableData = data
          this.subVisible = true
        } else {
          this.showTips(res.message, 2)
        }
      })
    },
    // 跳转库存分布页面
    distributeQuery() {
      this.$router.push('/reportStatistics/inventoryReport/inventoryDistribute')
    },
    /**
     * 搜索
     */
    search() {
      this.queryData.pageNo = 1
      this.listTableData()
    },
    /**
     * 盘点仓库选项事件
     */
    handleSelect() {
      this.queryData.pageNo = 1
      this.listTableData()
    },
    /**
     * 选择过滤信息
     */
    handleFilterSelect() {
      this.queryData.pageNo = 1
      this.listTableData()
    },
    typeChange() {
      this.queryData.pageNo = 1
      this.listTableData()
    },
    statusChange() {
      this.queryData.pageNo = 1
      this.listTableData()
    },
    /**
     * 搜索树形结构数据
     */
    onSelectTree() {
      this.getTreeData()
    },
    rowClick(row, column, event) {
      this.activeModel = row
    },
    /**
     * 统计
     */
    statistics() {
      this.listTableData()
    },
    /**
     * tree树被点击
     */
    handleClick(rowData) {
      this.queryData.goodsTypeId = rowData.id
      this.queryData.pageNo = 1
      // 点击的每一个tree树的信息对象
      this.listTableData()
    },
    /**
     * 获取tree数据
     */
    getTreeData() {
      getAction('/xghGoodsType/xghGoodsType/typeList', {}).then((res) => {
        if (res.code === 200) {
          let list = res.result
          let result = this.getTreeDataByList(list, '0', '')
          this.treeData = [
            {
              id: '',
              label: '全部',
              children: result,
            },
          ]
        }
      })
    },
    // 仓库切换方法
    onChangeStorehouse(val) {
       this.pdckOptions.filter((item) => {
        if (item.id === val) {
          this.storehouseName = item.storehouseName
        }
      })
    },
    getTreeDataByList(list, parentId, parentName) {
      let data = []
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (element.pid == parentId) {
          data.push({
            ...element,
            id: element.id,
            label: element.goodsTypeName,
            parentId,
            parentName,
            children: this.getTreeDataByList(list, element.id, element.companyTypeName),
          })
        }
      }
      return data
    },
    /**
     * 刷新
     */
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      // 初始化列配置数据
      this.defaultColumnData = JSON.parse(JSON.stringify(this.columnData))
      this.selectTitle()
      this.getTreeData()
      this.listTableData()
      this.checkStorehouse()
    },
    /**
     * 处理表格每一个行
     */
    handleRowDbclick(row) {
      if (this.isGroupByGoodsTypeFlag) {
        return this.showTips('商品类别结果不能查看明细！')
      }
      this.$router.push({
        name: 'reportStatistics-inventoryReport-inventoryChange', //库存变更明细
        params: {
          goodsId: row.id,
          goodsName: row.goodsName,
          storehouseId : this.queryData.storehouseId,
          storehouseName : this.storehouseName,
        },
      })
    },
    // 请求筛选条件数据
    requestQuery(obj) { },
    // 从后台获取数据,重新排序
    changeSort(val) {
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
      if (val.order) {
        //ascending 升序   descending 降序
        this.queryData.orderColumn = val.prop
        this.queryData.orderType = val.order == 'ascending' ? 1 : 2
        this.listTableData()
      } else {
        this.queryData.orderColumn = undefined
        this.queryData.orderType = undefined
        this.listTableData()
      }
    },
    // 触发列配置弹框
    onShowColumn() {
      // 现在的列配置
      let list = []
      this.columnData.forEach((item) => {
        let sub = item.subset
        list = list.concat(sub)
      })
      // 默认的列配置
      let defaultList = []
      this.defaultColumnData.forEach((item) => {
        let sub = item.subset
        defaultList = defaultList.concat(sub)
      })
      this.$refs.setColumnRef.loadData(list, defaultList)
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      var that = this
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + that.total + '条明细'
        } else if (['initStockNum', 'number', 'opNumber', 'initStockPrice', 'stockPrice', 'valuation','difference'].includes(column.property)) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (['initStockNum', 'number', 'opNumber'].includes(column.property)) {
              sums[index] = formatNumber(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
            } else {
              sums[index] = formatMoney(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
            }
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 合计列计算
    getSummaries1(param) {
      const { columns, data } = param
      const sums = []
      var that = this
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 2 || index === 4) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (['storehouseNumber'].includes(column.property)) {
              sums[index] = formatNumber(sums[index])
            } else {
              sums[index] = formatMoney(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
            }
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.listTableData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.queryData.pageNo = val
      this.listTableData()
    },
    // 导出数据
    exportExcel() {
      const fileName = '库存查询'
      let params = {
        ...this.queryData,
        showDelGoodsFlag: this.isShowDelGoodsFlag ? '0' : '1', // 0不展示 1展示
        showDelWarehouseFlag: this.isShowDelWarehouseFlag ? '0' : '1', // 0不展示 1展示
        groupByGoodsTypeFlag: this.isGroupByGoodsTypeFlag ? '1' : '0',
        fileName,
      }
      this.handleExportXlsByStaff(fileName, params)
    },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'storehouseName') {
        this.pdckOptions = this.filterMethod(this.pdckOptions, value, label)
      }
    },
    rowClass(row) {
      if (delcommafy(row.row.opNumber) < 0) {
        return { color: '#0027ff' }
      } else if (delcommafy(row.row.opNumber) === 0) {
        return { color: '#fd6c21' }
      }
      return { color: '#666666' }
    },
    showTips(msg, type = 1) {
      switch (type) {
        case 0:
          this.$elMessage.success(msg)
          break
        case 1:
          this.$elMessage.warning(msg)
          break
        case 2:
          this.$elMessage.error(msg)
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
$font-size: 12px;
$height-input: 30px; //0.55rem的高度
$height: 50px; //1rem的高度

.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: $height;
  display: flex;
  align-items: center;

  ::v-deep .el-button {
    width: 80px;
    height: $height-input;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size;
    border-radius: 0.1rem;
    border: none;
    margin-right: 6px;
    margin-left: 0;
  }

  .el-button--default {
    color: #666;
  }

  ::v-deep .el-select {
    width: 1rem;
    height: $height-input;
    box-sizing: border-box;
    margin-right: 0.112507rem;

    .el-input {
      .el-input__inner {
        height: $height-input;
        border: none;
        font-size: $font-size;
      }

      .el-input__suffix {
        height: $height-input;
        display: flex;
        align-items: center;
      }
    }
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 4.725295rem;
      height: $height-input;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: $height-input;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: $font-size;
        color: #666;

        &::placeholder {
          font-size: $font-size;
          color: #c1c1c1;
        }
      }
    }

    .el-button {
      width: 1rem;
    }

    .set_up {
      font-size: 20px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  .div_screen {
    margin-top: 5px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    ::v-deep .el-select {
      height: 30px;
      box-sizing: border-box;
      border-radius: 4px;

      .el-input {
        .el-input__inner {
          height: 30px;
          border-color: #e3e3e3;
          font-size: $font-size;
          padding-left: 0.15rem;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }

    ::v-deep .el-checkbox {
      .el-checkbox__label {
        font-size: $font-size;
        padding-left: 0.1rem;
        color: #666;
      }
    }

    .screen_left {
      display: flex;
      align-items: center;

      .set_input_width {
        display: flex;
        align-items: center;
        margin-right: 20px;

        >p {
          margin: 0;
          width: auto;
          min-width: 50px;
          margin-right: 6px;
          font-size: $font-size;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }
      }

      ::v-deep .el-checkbox {
        margin-right: 11px;

        .el-checkbox__label {
          padding-left: 6px;
          font-size: $font-size;
          color: #666;
        }
      }
    }

    .screen_right {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: $font-size;
      font-family: PingFang SC;
      font-weight: 400;
      color: #fd6c21;
      flex-shrink: 0;
      padding-right: 10px;
    }
  }

  .div_table {
    width: 100%;
    height: calc(100% - 50px - 1rem);
    // margin-top: 20px;
    display: flex;
    box-sizing: border-box;

    .div_tree {
      width: 180px;
      height: 100%;
      box-sizing: border-box;
      padding: 6px 0;
      border: 1px solid #e3e3e3;
      transition: all 0.3s;

      .tree_div1 {
        width: 100%;
        height: 20px;
        box-sizing: border-box;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          color: #666666;
          font-size: $font-size;
        }
      }

      .tree_input {
        width: 100%;
        height: 30px;
        margin-top: 10px;
        box-sizing: border-box;
        padding: 0 6px;

        p {
          width: 100%;
          height: 30px;
          margin: 0;
          box-sizing: border-box;
          border: 1px solid #dddddd;
          display: flex;
          align-items: center;
          position: relative;

          input {
            width: 100%;
            box-sizing: border-box;
            padding: 0 33px 0 5px;
            height: 28px;
            border: none;
            font-size: $font-size;

            &:focus {
              outline: none;
            }
          }

          span {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.55rem;
            height: 28px;
            background: #fff;

            .el-icon-search {
              font-size: $font-size;
              color: rgb(211, 211, 211);
            }
          }
        }
      }

      .tree_structure {
        width: 100%;
        height: calc(100% - 0.337521rem - 0.131258rem - 0.131258rem - 0.55rem);
        box-sizing: border-box;
        padding: 0 0.168761rem;
        margin-top: 0.131258rem;
        overflow: auto;

        ::v-deep .el-tree {
          width: 100%;

          .el-tree-node__children {
            .el-tree-node__label {
              color: #666;
              font-weight: normal;
            }
          }

          .el-tree-node__label {
            font-size: $font-size;
            font-weight: 600;
          }

          .el-tree-node__content>.el-tree-node__expand-icon {
            padding-left: 0;
          }
        }
      }
    }

    .table_content {
      width: calc(100% - 180px);
      margin-left: 0.187512rem;
      height: 100%;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          &:first-child {
            .cell {
              display: flex;
              justify-content: center;
              width: 100%;
            }
          }

          &:last-child {
            border-right: none;
          }
        }

        .el-table-column--selection {
          .cell {
            padding: 0;
            text-align: center;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        .cell {
          line-height: 30px;
          font-size: $font-size;
        }

        // th选择框颜色修改
        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        // td选择框颜色修改
        .is-checked {
          .el-checkbox__inner {
            color: #1b93f9;
            background-color: #1b93f9;
            border-color: #1b93f9;
          }
        }

        .el-table__body tr:hover>td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
  }

  .table_pagination {
    width: 100%;
    // height: 1rem;
    box-sizing: border-box;
    padding: 0.168761rem 0;
    display: flex;

    .pagination_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 0.525033rem;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }
}

::v-deep .el-dialog__header {
  padding: 15px 12px 13px 12px !important;

  .el-dialog__title {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #666666;
  }
}

::v-deep .el-dialog__body {
  padding: 10px 12px 22px 12px !important;
}

::v-deep .el-dialog__footer {
  padding: 0px 12px 22px 12px !important;
}

.sub_inventory {
  .top_text {
    font-size: $font-size;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 17px;
    color: #666666;
    margin-bottom: 10px;
  }

  ::v-deep .el-table {
    border: 1px solid #e3e3e3;
    box-sizing: border-box;

    th,
    td {
      padding: 0;
      color: #666;
      box-sizing: border-box;
      border-right: 1px solid #e3e3e3;

      &:first-child {
        .cell {
          display: flex;
          justify-content: center;
        }
      }

      &:last-child {
        border-right: none;
      }
    }

    .el-table-column--selection {
      .cell {
        padding: 0;
        text-align: left;
      }
    }

    .el-table__header {
      tr {
        &:last-child {
          th {
            background: rgb(237, 237, 237) !important;
          }
        }
      }
    }

    .cell {
      line-height: 30px;
      font-size: $font-size;
    }
    .el-table__footer-wrapper {
      td {
        background: #f4f4f4;
        border: none;
      }
    }
  }
}
.dialog-footer-button {
  width: 60px;
  height: 30px;
  padding: 0;
  span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #FFFFFF;
  }
}
.select_storehouse {
  width: 120px;
}

.select_zero_number {
  width: 165px;
}
</style>
